<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>微型响应式系统</title>
  </head>
  <body>
    响应式数据的基本实现
  </body>

  <script>
    // 存储副作用函数的桶
    const bucket = new Set();
    // 原始数据
    const data = { text: "hello world" };
    // 对原始数据进行代理
    const obj = new Proxy(data, {
      // 拦截读取操作
      get(target, key) {
        // 将副作用函数 effect 添加到存储副作用函数的桶中
        bucket.add(effect);
        // 返回属性值
        return target[key];
      },
      // 拦截设置操作
      set(target, key, newVal) {
        // 设置属性值
        target[key] = newVal;
        // 把副作用函数从桶中取出来并执行
        bucket.forEach((fn) => fn());
        // 返回 true 代表设置操作成功
        return true;
      },
    });
    // 副作用函数
    function effect() {
      document.body.innerHTML = obj.text;
    }

    // 执行副作用函数，触发读取
    effect();
    // 1秒后修改响应式数据
    setTimeout(() => {
      obj.text = "hello world 3";
    }, 1000);
  </script>
</html>
